<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>分页查询和添加</title>
    <!-- 前端调用服务器数据 -->
    <style>
        table{
            border-collapse: collapse;
            width: 400px;
        }
        th,td{
            border: 1px solid black;
            text-align: center;
        }
        /* 添加 */
        .adds{
            border: 1px solid black;
            margin-top: 20px;
            width: 400px;
            text-align: center;
        }
        .adds input{
            outline: none;
        }
    </style>
</head>
<body>
    <!-- 查询数据 -->
    <table>
        <thead>
            <tr>
                <th>账号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody id="tbody">
        </tbody>
        <tfoot>
            <tr>
                <td colspan="5">
                    <button id="first">首页</button>
                    <button id="up">上一页</button>
                    <span id="pageIndex"></span>
                    <span>/</span>
                    <span id="pageAll"></span>
                    <button id="next">下一页</button>
                    <button id="end">尾页</button>
                </td>
            </tr>
        </tfoot>
    </table>
    <!-- 添加数据 -->
    <div class="adds">
        <p>
            账号：
            <input type="text" name="" id="adds_id">
        </p>
        <p>
            姓名：
            <input type="text" name="" id="adds_name">
        </p>
        <p>
            年龄：
            <input type="text" name="" id="adds_age">
        </p>
        <p>
            性别：
            <input type="radio" name="sex" value="男" checked> 男
            <input type="radio" name="sex" value="女"> 女
        </p>
        <p>
            <button id="btn_add">添加</button>
            <button id="btn_cancel">取消</button>
        </p>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script>
        let pageIndex = 1
        let pageAll = 1
        let pageNumber = 5

       function loadData(){
            $("#tbody").html("")
            // jqurey 做法  分页效果
            $.get("http://127.0.0.1:8080/pages",{
                pageIndex,pageNumber
            },({page,count})=>{
                // 计算总页数
                pageAll = Math.ceil(count/pageNumber)
                // console.log(pageAll);
                // 显示分页数
                $("#pageIndex").html(pageIndex)
                $("#pageAll").html(pageAll)

                // 遍历拿取信息
               page.forEach(item => {
                    let tr = $(`
                    <tr>
                        <td>${item.id}</td>
                        <td>${item.name}</td>
                        <td>${item.age}</td>
                        <td>${item.sex}</td>
                        <td>
                            <button onclick="amend_infor('${item.id}')">编辑</button>
                            <button onclick="delete_infor('${item.id}')">删除</button>
                        </td>
                    </tr>`)
                    $("#tbody").append(tr)
                });
            })
       }
       loadData()
    // 首页
    $("#first").click(function(){
        pageIndex =1
        loadData()
    })
    // 尾页
    $("#end").click(function(){
        pageIndex = pageAll
        loadData()
    })
    // 上一页
    $("#up").click(function(){
        if (pageIndex-- <= 1) {
            pageIndex =1
        }
        loadData()
    })
    // 下一页
    $("#next").click(function(){
        if (pageIndex++ >= pageAll) {
            pageIndex = pageAll
        }
        loadData()
    })
    $("#btn_add").click(function(){
        let id = $("#adds_id").val()
        let name = $("#adds_name").val()
        let age = $("#adds_age").val()
        let sex = [...$("input[name='sex']")].find(key=>key.checked).value
        // 将获取的数据放在一个对象中
        let arrinf = {id,name,age,sex} 
        // console.log(arrinf);
        if (!id || !name || !age || !sex) {
            alert("信息不能为空，请输入内容")
            return
        }
        if ($(this).html() == "添加") {
            //添加前判断账号是否存在
            $.get("http://127.0.0.1:8080/getInforOne",{id},res=>{
                // 如果为空，则表示没有，可以添加
                if (res === "") {
                     // 将添加的内容发送到后端
                    $.post("http://127.0.0.1:8080/add",arrinf,res=>{
                        if(res){
                            alert("添加成功")
                            loadData()
                            // 调用取消按钮的点击事件，清除内容
                            $("#btn_cancel").click()
                        }
                    })
                }else{
                    alert("账号已存在，添加失败")
                }
            })  
        }else{
            // 修改
            $.post("http://127.0.0.1:8080/amendInfor",arrinf,res=>{
                if(res){
                    alert("修改成功")
                    loadData()
                    // 调用取消按钮的点击事件，清除内容
                    $("#btn_cancel").click()
                }
            })
        }   
    })
    $("#btn_cancel").click(function(){
        $("#adds_id").val("").removeAttr("readonly")
        $("#adds_name").val("")
        $("#adds_age").val("")
        // 点击取消后，选中默认的哪一个状态
        $("input[name='sex']")[0].checked = true
        $("#btn_add").html("添加")
    })   

    // 根据id获取
    function amend_infor(id){
        $.get("http://127.0.0.1:8080/getInforOne",{id},res_inf=>{
            // console.log(res_inf);
            $("#adds_id").val(res_inf.id).attr("readonly","readonly")
            $("#adds_name").val(res_inf.name)
            $("#adds_age").val(res_inf.age);
            [...document.getElementsByName("sex")].find(items=>{
                if (items.value == res_inf.sex) {
                    items.checked = true
                }
            })
            // 点击编辑后，添加按钮需要变成修改
            $("#btn_add").html("修改")
        })
    }

    // 删除
    function delete_infor(id){
        if (confirm("你确定要删除吗？")) {
            $.post("http://127.0.0.1:8080/delete",{id},res=>{
                if (res) {
                    alert("删除成功")
                    loadData()
                }else{
                    alert("删除失败")
                }
            })
        }
    }
    </script>
</body>
</html>